/** @jsxImportSource @emotion/react */
import { jsx, css } from "@emotion/react";
import * as React from "react";
import { Avatar, AvatarSizes } from "../Avatar";
//Faker.js已经被删除
import { faker } from '@faker-js/faker/locale/zh_CN';
import { storiesOf } from "@storybook/react";
import {
    ComboBoxDatalist,
} from "../ComboBoxDatalist";
import {Input, InputBase, InputDatalist, InputGroup, InputRefBase, TextArea} from "../Form";
import { Text } from "../Text";
import { ListItem } from "../List";
import {BlobInputList} from "../BlobInputList";

export const ComboBoxStories = storiesOf("ComboBox", module)
   .add("floating-ui版本", () => {
        const [query, setQuery] = React.useState('初始1' );
        console.log("ComboBoxDatalist进入=",　query);
        return <ComboBoxDatalist datalist={data}   value={ query }
                                 onListChange={v => setQuery(v)}/>;
    })
  .add("Like InputDatalist", () => <ListExample />)
    .add("BolbInputlist测试", () => <ListExample2 />);


const defaultEntries = new Array(100).fill(null).map((each,index) => ({
  id: index,
  name: faker.name.firstName() + " " + faker.name.lastName(),
  image: faker.image.avatar()
}));

// function Example() {
//   const [entries, setEntries] = React.useState(defaultEntries);
//   const [query, setQuery] = React.useState('初始文字' );
//
//   const toRender = !query
//     ? []
//     : entries
//         .filter(
//           entry => entry.name.toLowerCase().indexOf(query.toLowerCase()) > -1
//         )
//         .slice(0, 10);
//
//   return (
//     <div css={{ margin: "3rem auto", width: "30rem" }}>
//       <ComboBox
//         autocomplete={false}
//         query={query||''}
//         onQueryChange={v => {
//           setQuery(v);
//         }}
//         onSelect={v => {
//          v&&setQuery(v);
//         }}
//       >
//         <ComboBoxInput
//           aria-label="Query users"
//           placeholder="Search for users"
//           readOnly={false}
//           onSave={ v => {
//               setQuery(v);
//           } }
//         />
//
//         {query && (
//           <ComboBoxList aria-label="Query users">
//             {toRender.length ? (
//               toRender.map(entry => {
//                 return (
//                   <ComboBoxOption value={entry.name} key={entry.id} >
//                   </ComboBoxOption>
//                 );
//               })
//             ) : (
//               <div>
//                 <Text
//                   muted
//                   css={{ display: "block", padding: "0.5rem 0.75rem" }}
//                 >
//                   {query && toRender.length === 0 ? (
//                     <span>No entries found.</span>
//                   ) : (
//                     <span>Try searching for users by email or name.</span>
//                   )}
//                 </Text>
//               </div>
//             )}
//           </ComboBoxList>
//         )}
//       </ComboBox>
//     </div>
//   );
// }

// function CustomExample() {
//   const [entries, setEntries] = React.useState(defaultEntries);
//   const [query, setQuery] = React.useState("");
//
//   const toRender = !query
//     ? []
//     : entries
//         .filter(
//           entry => entry.name.toLowerCase().indexOf(query.toLowerCase()) > -1
//         )
//         .slice(0, 8);
//
//   return (
//     <div css={{ margin: "3rem auto", width: "30rem" }}>
//       <ComboBox
//         query={query}
//         onQueryChange={v => {
//           setQuery(v);
//         }}
//         onSelect={v => {
//           setQuery(v);
//         }}
//       >
//         <ComboBoxInput
//           aria-label="Query users"
//           placeholder="Search for users"
//           component={InputRefBase}
//           autoComplete={"true"}
//         />
//
//         {query && (
//           <ComboBoxList aria-label="Query users">
//             {toRender.length ? (
//               toRender.map(entry => {
//                 return (
//                   <ComboBoxOption
//                     css={{ padding: 0 }}
//                     value={entry.name}
//                     key={entry.id}
//                   >
//                     <ListItem
//                       interactive={false}
//                       primary={<ComboBoxOptionText value={entry.name} />}
//                       contentBefore={
//                         <Avatar size="sm" name={entry.name} src={entry.image} />
//                       }
//                     />
//                   </ComboBoxOption>
//                 );
//               })
//             ) : (
//               <div>
//                 <Text
//                   muted
//                   css={{ display: "block", padding: "0.5rem 0.75rem" }}
//                 >
//                   {query && toRender.length === 0 ? (
//                     <span>No entries found.</span>
//                   ) : (
//                     <span>Try searching for users by email or name.</span>
//                   )}
//                 </Text>
//               </div>
//             )}
//           </ComboBoxList>
//         )}
//       </ComboBox>
//     </div>
//   );
// }

function ListExample() {
    const [entries, setEntries] = React.useState(defaultEntries);
    const [query, setQuery] = React.useState("22gle.com");

    const toRender = !query
        ? []
        : entries
            .filter(
                entry => entry.name.toLowerCase().indexOf(query.toLowerCase()) > -1
            )
            .slice(0, 10);
    console.log("longtext列表输入的： query=",query);
    return (
        <div css={{ margin: "3rem auto", width: "30rem" }}>
            <ComboBoxDatalist   placeholder="可输入也可选择"
                  value={ query || '' }
                  onListChange={v => setQuery( v||undefined ) }
                  datalist={["实际vals","22gle.com",'材料名称《电梯年度自行检查报告》,编号：werwerwerwer22222ggggg']}
            >
            </ComboBoxDatalist>
        </div>
    );
}


const data = [
    "Alfalfa Sprouts",
    "Apple",
    "Apricot",
    "Artichoke",
    "Asian Pear",
    "Asparagus",
    "Atemoya",
    "Avocado",
    "Bamboo Shoots",
    "Banana",
    "Bean Sprouts",
    "Beans",
    "Beets",
    "Belgian Endive",
    "Bell Peppers",
    "Bitter Melon",
    "Blackberries",
    "Blueberries",
    "Bok Choy",
    "Boniato",
    "Boysenberries",
    "Broccoflower",
    "Broccoli",
    "Brussels Sprouts",
    "Cabbage",
    "Cactus Pear",
    "Cantaloupe",
    "Carambola",
    "Carrots",
    "Casaba Melon",
    "Cauliflower",
    "Celery",
    "Chayote",
    "Cherimoya",
    "Cherries",
    "Coconuts",
    "Collard Greens",
    "Corn",
    "Cranberries",
    "Cucumber",
    "Dates",
    "Dried Plums",
    "Eggplant",
    "Endive",
    "Escarole",
    "Feijoa",
    "Fennel",
    "Figs",
    "Garlic",
    "Gooseberries",
    "Grapefruit",
    "Grapes",
    "Green Beans",
    "Green Onions",
    "Greens",
    "Guava",
    "Hominy",
    "Honeydew Melon",
    "Horned Melon",
    "Iceberg Lettuce",
    "Jerusalem Artichoke",
    "Jicama",
    "Kale",
    "Kiwifruit",
    "Kohlrabi",
    "Kumquat",
    "Leeks",
    "Lemons",
    "Lettuce",
    "Lima Beans",
    "Limes",
    "Longan",
    "Loquat",
    "Lychee",
    "Madarins",
    "Malanga",
    "Mandarin Oranges",
    "Mangos",
    "Mulberries",
    "Mushrooms",
    "Napa",
    "Nectarines",
    "Okra",
    "Onion",
    "Oranges",
    "Papayas",
    "Parsnip",
    "百香果",
    "Peaches",
    "Pears",
    "Peas",
    "Peppers",
    "夏威夷果",
    "Pineapple",
    "Plantains",
    "Plums",
    "香瓜",
    "Potatoes",
    "Prickly Pear",
    "Prunes",
    "Pummelo",
    "Pumpkin",
    "Quince",
    "Radicchio",
    "Radishes",
    "Raisins",
    "Raspberries",
    "Red Cabbage",
    "Rhubarb",
    "Romaine Lettuce",
    "Rutabaga",
    "Shallots",
    "Snow Peas",
    "Spinach",
    "Sprouts",
    "Squash",
    "Strawberries",
    "String Beans",
    "Sweet Potato",
    "Tangelo",
    "Tangerines",
    "Tomatillo",
    "Tomato",
    "Turnip",
    "Ugli Fruit",
    "Water Chestnuts",
    "Watercress",
    "Watermelon",
    "Waxed Beans",
    "Yams",
    "Yellow Squash",
    "Yuca/Cassava",
    "Zucchini Squash"
];

function ListExample2() {
    const [entries, setEntries] = React.useState(defaultEntries);
    const [query, setQuery] = React.useState("实电梯威威");

    const toRender = !query
        ? []
        : entries
            .filter(
                entry => entry.name.toLowerCase().indexOf(query.toLowerCase()) > -1
            )
            .slice(0, 10);
    console.log("ListExample2longtext列表输入的： query=",query);
    return (
        <div css={{ margin: "3rem auto", width: "30rem" }}>
            <ComboBoxDatalist   placeholder="可输入也可选择"
                                value={ query || ''}
                                onListChange={v => setQuery( v||undefined ) }
                                datalist={["实际vals","22gle.com",'材料名称《电梯年度自行检查报告》,编号：werwerwerwer22222ggggg']}
            >
            </ComboBoxDatalist>
            <TextArea required rows={3}  placeholder="快递单号也请捎上"
                      value={query || ''} onChange={e => setQuery( e.currentTarget.value||undefined ) }
            />
            <BlobInputList  value={ query || ''} rows={3}
                            listStyle={css({fontSize: '1.2rem',})}
                            datalist={["实电梯年查报际vals","22gle.com",'材检查报erwerwer22222ggggg']}
                            onListChange={v => setQuery( v||undefined ) } />
        </div>
    );
}

